<template>
    <div class="wrapper">
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <div class="pic"
                :style='{"background-image":"url("+item.src+")"}'></div>
                <div class="txt">
                    <span>{{item.name}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import {purchaseArray} from '@/assets/data/home-purchase.js'
export default ({
    name: 'HomePurchase',
    data() {
        return {
            arr: purchaseArray
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    ul {
        li {
            height: 250px;
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
            .pic {
                height: 200px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }
            .txt {
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                background-color: black;
                span {
                    font-size: 18px;
                    color: white;
                }
            }
        }
    }
}
</style>